<template>
  <div class="xw-table" :style="'font-size:' + fontSize + 'vm;'">
    <Row style="width: 100%; display: -webkit-box">
      <Col
        v-for="(item, index) of title"
        :key="index"
        class="xw-table-title"
        :style="'text-align:' + item.align"
        :span="item.span"
      >
        {{ item.title }}
      </Col>
    </Row>
    <div
      class="tv-table-over"
      :style="'height:' + theight + 5 + 'px;overflow: hidden'"
      v-show="show"
    >
      <div id="table-bar" :style="'top:' + top + 'px;'">
        <Row
          class="xw-table-bar"
          v-for="(item, index) of list"
          :key="index"
          style="width: 100%; display: -webkit-box"
        >
          <Col
            class="xw-table-list"
            id="table-bar-list"
            v-for="(title, index) of title"
            :key="index"
            :style="'text-align:' + title.align"
            :span="title.span"
          >
            {{ title.key === "isAbsenteeism" ? "是" : item[title.key] }}
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'xw-table',
  props: {
    top: {
      type: Number
    },
    fontSize: {
      type: Number,
      default: 1
    },
    title: {
      type: Array,
      default: []
    },
    list: {
      type: Array,
      default: []
    },
    numbers: {
      type: Number,
      default: 5
    },
    turn: {
      type: Boolean
    },
    show: {
      type: Boolean
    }
  },
  data () {
    return {
      theight: null
      // top: 0
    };
  },
  methods: {
    getTurn () {
      this.$nextTick(() => {
        setTimeout(() => {
          let height = document.getElementById('table-bar').clientHeight;
          let theight = document.getElementById('table-bar-list').clientHeight;
          // let theight = document.getElementsByClassName('xw-table-title')[0].clientHeight;
          let length = Math.ceil(this.list.length / this.numbers);
          this.theight = (theight * this.numbers);
          let num = 1;
          // debugger;
          this.$emit('getTurn', num, length, this.theight);
          return false;
        }, 1000);
        // this.getEmitTime(num, length, this.theight);
      });
    }
  },
  watch: {
    turn (newData, oldData) {
      if (newData) {
        this.getTurn();
      };
      // this.top = 0;
    }
  }
};
</script>

<style scoped>
.xw-table {
  font-size: 0.8vw;
}
.xw-table-list {
  border-right: 1px solid #5b657e;
  border-bottom: 1px solid #5b657e;
  padding: 5px 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/*.xw-table-bar .xw-table-title:first-child{*/
/*border-left: 1px solid #5B657E;*/
/*}*/
.xw-table-title {
  background-color: #5b657e;
  font-weight: bold;
  padding: 5px 2px;
  color: #fff;
  /*font-size: 24px;*/
  /*border: 1px solid #999999;*/
  border-left: none;
  text-align: center;
}
.tv-table-over {
  overflow: hidden;
}
#table-bar {
  position: relative;
  border-left: 1px solid #5b657e;
  left: 0;
  top: 0;
  transition: top 1s;
}
</style>
